{%load static%}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>online test</title>
    <!-- <link rel="stylesheet" type="text/css" href="{% static 'login/css/index.css' %}"/> -->
    <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet">
  </head>
  <body style="background: #2AABD2;">

    <div class="container">
      <!--页面标题部分-->
      <div class="row">
        <div class="jumbotron" style="background: #FFFFFF;opacity: 0.3;color: #000000;">
          <h1 class="text-center text-muted" style="font-family: '微软雅黑'"><span class="glyphicon glyphicon-globe"></span>&ensp;python+人工智能&ensp;<span class="glyphicon glyphicon-globe"></span><br/>1802C班2018年度7月水平测验</h1>
          {% if message %}
          <h2 class="text-center text-muted" style="font-family: '微软雅黑'">敬爱的{{teacher_name}}老师，请您预览答题页面</h2>
          {% endif %}
        </div>      
      </div>
      <!--/页面标题结束-->
      <!--提示部分-->
      <div class="row" style="margin-bottom: 10px;">
          <div class="col" style="text-align: center;">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
          考生须知(开始作答之前请点击这里)
            </button>
            <a href="{% url 'paper:teacher_index' %}"><button type="button" class="btn btn-primary btn-lg">点此返回选择试卷页面</button></a>
            
            <a href="{% url 'login:login' %}"><button type="button" class="btn btn-primary btn-lg">点此返回登录页面</button></a>
          </div>
      </div>
<!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">考生须知</h4>
      </div>
      <div class="modal-body">
         <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;1.本次考试共有五种题型，分别是:单选题(10道,每题1分),多选题(10道,每题2分),填空题(10道,每题2分),判断题(10道,每题1分),简答题(6道,每题5分)</h3>
         <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;2.考试时间共计90分钟，开考30分钟之后方可交卷。</h3>
         <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;3.考生如果在考试过程中被发现有舞弊行为，成绩清零。</h3>
         <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;4.页面底部交卷按钮点击之后不可撤销，成绩直接上传，请不要误点。</h3>
         <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;5.如果因为没有阅读考生须知而出导致考试出现问题，概不负责。</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
      </div>
    </div>
  </div>
</div>
<form action="{% url 'paper:dati_tijiao_info' %}" method="post">
    {% csrf_token %}

      <!--/提示部分-->
    {%if 单选题%}
      <!--这里放置单选题面板-->
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title"> 单选题(单题分值:{{单选题.1}})</h3>
        </div>
        <div class="panel-body">
          {% for question in 单选题.2 %}
          <h3>{{forloop.counter}}、{{question.question_text}}</h3>
          <ol type="A">
          {% for choice in question.choice_set.all %}
          <div class="radio">
            <li><label>
              <input type="radio" name="{{question.id}}" id="optionsRadios1" value="{{choice.id}}">
               {{choice.choice_text}} 
            </label></li>
        </div>
          {% endfor %}
          </ol>
        
        {% endfor %}
      </div>    
    </div>
    <!--/单选题面板结束-->
    {%endif%}

    {% if 多选题 %}
    <!--多选题面板-->
    <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title"> 多选题(单题分值:{{多选题.1}})</h3>
        </div>
        <div class="panel-body">
          <h3>这里放置题干，直接更改文字即可</h3>
          <div class="checkbox">
            <label>
              <input type="checkbox" value="">
              A.这里放置选项文字，直接更改即可。
            </label>
        </div>
        <div class="checkbox">
            <label>
              <input type="checkbox" value="">
              B.这里放置选项文字，直接更改即可。
            </label>
        </div>  
        <div class="checkbox">
            <label>
              <input type="checkbox" value="">
              C.这里放置选项文字，直接更改即可。
            </label>
        </div>  
        <div class="checkbox">
            <label>
              <input type="checkbox" value="">
              D.这里放置选项文字，直接更改即可。
            </label>
        </div>  
      </div>
    </div>
    {% endif %}
    <!--/多选题面板结束-->
    <!--填空题面板部分-->
    {% if 填空题 %}
    <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title"> 填空题(单题分值:{{填空题.1}})</h3>
        </div>
        <div class="panel-body table-responsive">
          <table class="table table-hover">
            <tr>
              <th>题干</th>
              <th>答题</th>
            </tr>
            {% for question in 填空题.2 %}
            <tr>
              

              <td>{{question.question_text}}</td>
              <td>
                <div class="input-group">

                    <input type="text" name="{{question.id}}" class="form-control">
                    <span class="input-group-btn">
                    
                    </span>
                </div>
              </td>
              {% endfor %}
            </tr>
          </table>
        </div>
    </div>
    {% endif %}
    <!--/填空题面板结束-->
    <!--判断题面板开始-->
    {% if 判断题 %}
    <div class="panel panel-warning">
        <div class="panel-heading">
          <h3 class="panel-title"> 判断题(单题分值:1)</h3>
        </div>
        <div class="panel-body">
          {% for question in 判断题.2 %}
          <div class="row">
            
            <div class="col-sm-8">
              <p>{{question.question_text}}</p>         
            </div>
            <div class="col-sm-4">
              <label class="checkbox-inline">
  <input type="radio" id="inlineCheckbox1" name="{{question.id}}" value="对"><span class="glyphicon glyphicon-ok"></span>
            </label>
            <label class="checkbox-inline">
  <input type="radio" id="inlineCheckbox1" name="{{question.id}}" value="错"><span class="glyphicon glyphicon-remove"></span>
            </label>
            </div>
          </div>
          {% endfor %}    
        </div>
    </div>
    {% endif %}
    <!--/判断题面板结束-->
    <!--简答题面板-->
    {% if 简答题 %}
      <div class="panel panel-danger">
        <div class="panel-heading">
          <h3 class="panel-title"> 简答题(单题分值:{{简答题.1}})</h3>
        </div>
        <div class="panel-body">
          {% for question in 简答题.2 %}
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
              <h3>{{question.question_text}}</h3>
            </div>
            <div class="col-sm-10 col-sm-offset-1">
              <textarea class="form-control" rows="3" name="" placeholder="请作答......"></textarea>
            </div>        
          </div>
          {% endfor %}
        </div>
    
    </div>
    {% endif %}
    <!--/简答题面板结束-->

    <div class="row" style="margin-top:10px;">
        <div class="col-sm-6 col-sm-offset-3">
          <button type="submit" class="btn btn-danger btn-lg btn-block" style="outline: none;">确认全部完成？点击提交答案。</button>
        </div>          
      </div>

      </form>
    </div>
    <script type="text/javascript" src="{% static 'login/js/jquery-3.3.1.min.js' %}"></script>
    <!-- Bootstrap部分： -->
    <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>
  </body>
</html>